<template>
	<view class="container">
		<u-form :model="profile" ref="profile">
			<u-form-item label="头像">
				<u-image :src="profile.avatar|thumbAvatar" width="100" height="100" shape="circle" @click="changeAvatar"></u-image>
			</u-form-item>
			<u-form-item label="昵称" prop="name">
				<u-input v-model="profile.name" maxlength="15" placeholder="请输入昵称"></u-input>
			</u-form-item>
			<u-form-item label="性别">
				<u-radio-group v-model="gender.name" @change="changeGender">
					<u-radio v-for="(item,index) in gender.options" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="简介" label-position="top" prop="about">
				<u-input v-model="profile.about" type="textarea" maxlength="15" placeholder="请输入简介"></u-input>
			</u-form-item>
			<view class="form-item hide">
				<u-input v-model="profile.avatar"></u-input>
			</view>
			<view class="form-item">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
import My from '@/api/my'

export default {
  data() {
    return {
      profile: {},
      gender: {
        name: '男',
        value: 1,
        options: [{
          name: '男'
        }, {
          name: '女'
        }, {
          name: '保密'
        }]
      },
      rules: {
        name: [{
          required: true,
          message: '请填写昵称'
        }, {
          min: 2,
          max: 15,
          message: '昵称2-15个字符'
        }],
        about: [{
          min: 10,
          max: 255,
          message: '简介10-255个字符'
        }]
      }
    }
  },
  onLoad() {
    this.loadMyProfile()
  },
  onReady() {
    this.$refs.profile.setRules(this.rules)
  },
  methods: {
    changeGender(name) {
      this.gender.value = this.getGenderValueByName(name)
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: res => {
          const filePath = res.tempFilePaths[0]
          My.uploadAvatar(filePath).then(res => {
            const myRes = JSON.parse(res.data)
            if (myRes.code === 0) {
              this.profile.avatar = myRes.data.src
            } else {
              this.$u.toast(myRes.msg)
            }
          })
        }
      })
    },
    submit() {
      this.$refs.profile.validate(valid => {
        if (valid) {
          My.updateProfile({
            name: this.profile.name,
            gender: this.gender.value,
            avatar: this.profile.avatar,
            about: this.profile.about
          }).then(res => {
            this.$u.toast('更新资料成功')
          }).catch(e => {
            this.$u.toast('更新资料失败')
          })
        }
      })
    },
    getGenderValueByName(name) {
      switch (name) {
        case '男':
          return 1
        case '女':
          return 2
        default:
          return 3
      }
    },
    getGenderNameByValue(value) {
      switch (value) {
        case 1:
          return '男'
        case 2:
          return '女'
        default:
          return '保密'
      }
    },
    loadMyProfile() {
      My.getProfile().then(res => {
        this.profile = res.profile
        this.gender.name = this.getGenderNameByValue(res.profile.gender)
      }).catch(e => {
        this.$u.toast('获取资料失败')
      })
    }
  }
}
</script>

<style>
</style>
